function Nav(){
}
$.extend(Nav.prototype,{
    init:function(){
        this.getData();
    },
    getData:function(){
        var url = "http://localhost:8888/n";
        $.ajax(url,{
            dateType:JSON
        }).done($.proxy(function(res){
            var list = this.cut(res.navdata)
            this.render(list);
            new NavShow()
        },this))
    },
    cut:function(res){
        let  list = [];
        for(var item in res){
            list.push(res[item]);
        }
        return list;
    },
    render:function(data){
        var html = ""
        for(var i=0 ,item ; item = data[i];i++){
                        var html_l = ""
                        for(var j = 0 ,items ; items =item.data[j];j++ ){
                                var html_n =""
                                    for(var k = 0 ,itemes;itemes=items.goods[k];k++){
                                        html_n += `
                                        <li>
                                            <a href="#">${itemes}</a>
                                        </li>
                                        `
                                    }
                                    html_l += `
                                    <div class="list_lta">
                                        <p>
                                        <a href="#">${items.className}</a>
                                        <ul class="clear">
                                            ${html_n}
                                        </ul>
                                        </p>
                                    </div>
                                    `
                            }
                    html += `
                    <li>
                    <div>
                        <a href="#" class="list_nm">
                            ${item.navName}
                            <span class="list_item"></span>
                        </a>
                        <div class="list_cont">
                            <div class="list_lt">
                                ${html_l}
                            </div>
                            <div class="list_rt">
                                <a href="#">
                                    <img src="https://p1.lefile.cn/product/adminweb/2019/07/15/f038d500-96fa-4663-a28d-e4142e372ebd.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                    `
                $(".nav ul").html(html);
        }
    }
})

function NavShow(){
    this.list = $(".nav>ul>li");
    this.init();
}
$.extend(NavShow.prototype,{
    init:function(){
        this.list.on("mouseenter",$.proxy(function(){
            this.showNav();
        },this))
        this.list.on("mouseleave",$.proxy(function(){
            this.hidNav();
        },this))
    },
    showNav:function(evt){
        var e = evt || window.event;
        this.target = e.target || e.srcElement;
        $(this.target).addClass(" list_red");
        this.box  =$(this.target).next(".list_cont");
        this.box.css("display","block");
    },
    hidNav:function(){
        this.box.css("display","none");
        $(this.target).removeClass("list_red");
    }
})

export default new Nav();